<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计数案例-父子通信</title>
  <script src="/js/vue.js"></script>
</head>
<body>

  <div id="app">
    <p>{{counter}}</p>
    <cpn v-bind:childcounter = "counter" v-on:change="changecounter($event)"></cpn>
  </div>

<template id="cpn">
    <div>
        <button @click="increase()">+</button>
        <button @click="decrease()">-</button>
    </div>
</template>

<br>
  <script>
    const cpn = {
        template:'#cpn',
        data(){
            return{
                childscore:this.childcounter
            }
        },
        props:['childcounter'],
        methods:{
            increase(){
                this.childscore ++
                console.log(this.childscore);
                this.$emit('change',this.childscore)
            },
            decrease(){
                this.childscore --
                console.log(this.childscore);
                this.$emit('change',this.childscore)
            }
        }
    }

    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world',
        counter:100
      },
      components:{
        cpn
      },
      methods:{
        changecounter(item){
            this.counter = item
        }
      }
    })
  </script>
</body>
</html>